<template>
  <div class="lyy-card" data-title="上下班规则">
    <span class="label">上下班规则</span>
    <div>
      <div class="rule-item-box" v-for="(item,index) in list" :key="index">
        <span class="name">{{index == 0 ? '上':'下'}}班规则</span>
        <!-- <el-select v-model="item.type" placeholder="请选择" style="width:150px;" @change="onChange">
          <el-option v-for="current in options1" :key="current.value" :label="current.label" :value="current.value"></el-option>
        </el-select> -->
        <!-- <el-select v-model="form.value2" placeholder="请选择" style="width:40%;">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select> -->
        <div class="form-item">
            <span>{{index == 0 ? '上':'下'}}班时间前</span>
            <el-input v-model="item.scopeStart" style="width:80px;" size="mini" placeholder="请输入" @input="e=> (item.scopeStart=item.scopeStart.replace(/\D/g,''))" @change="onChange"></el-input>
            <span>分钟，</span>
            <span>{{index == 0 ? '上':'下'}}班时间后</span>
            <el-input v-model="item.scopeEnd" style="width:80px;" size="mini" placeholder="请输入" @input="e=> (item.scopeEnd=item.scopeEnd.replace(/\D/g,''))" @change="onChange"></el-input>
            <span>分钟，开始计算，</span>
            <span>{{index == 0 ? '停留':'离开'}}</span>
            <el-input v-model="item.wait" style="width:80px;" size="mini" placeholder="请输入" @input="e=> (item.wait=item.wait.replace(/\D/g,''))" @change="onChange"></el-input>
            <span>分钟。</span>
            <span>使用</span>
            <el-select v-model="item.use" style="width: 80px" size="mini" placeholder="请选择" @change="onChange">
                <el-option
                v-for="item in [{label: '开始', value: '1'}, {label: '结束', value: '0'}]"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <span>时间为{{index == 0 ? '上':'下'}}班时间</span>
            
            <!-- <div style="display:flex;flex: 0 0 150px;">
                <el-input v-model="item.time" placeholder="请输入分钟数" @input="e=> (item.time=item.time.replace(/\D/g,''))" @change="onChange"></el-input>
                <span class="name">分钟</span>
            </div> -->
        </div>
        <!-- <div style="display:flex;flex: 0 0 150px;">
          <el-input v-model="item.time" placeholder="请输入分钟数" @input="e=> (item.time=item.time.replace(/\D/g,''))" @change="onChange"></el-input>
          <span slot="append" class="name">分钟</span>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
    props:{
        value: {
            type: [String, null],
            default: null
        },
    },
    watch: {
        value: {
            handler(nv) {
                if(nv) {
                    const v = JSON.parse(nv);
                    this.$set(this.list, 0, v.clockIn);
                    this.$set(this.list, 1, v.clockOut);
                }else{
                    this.list = [
                        {scopeStart: null,scopeEnd: null, wait: null, use: '1' },
                        {scopeStart: null,scopeEnd: null, wait: null, use: '1' },
                    ]
                }
            },
            immediate: true
        }
    },
    data() {
        return {
            options1: [
                {label: '停留时长', value: '2'},
                {label: '超出时长', value: '3'},
                {label: '提前时长', value: '1'},
            ],
            list: [
                {name: '上班规则',type: '1',time: null  },
                {name: '下班规则',type: '1',time: null  },
            ]
        }
    },
    methods: {
        onChange(e) {
            const obj = {
                clockIn: this.list[0],
                clockOut: this.list[1]
            }
            this.$emit('input', JSON.stringify(obj))
        }
    }
}
</script>

<style lang="scss" scoped>
.rule-item-box {
    display: flex;
    gap: 15px;
    padding: 6px 0 8px 0;
    &:first-child {
        border-bottom: 1px solid #e9e9e9;
    }
    .name {
        word-break: keep-all;
        margin-left: 4px;
    }

    .form-item {
        span {
            display: inline-block;
            padding: 0 4px;
        }
    }
}
</style>